<template>
   <div v-if="SearchHistoryData.length>=1">
       <div id="Title" class="flex">
          <img src="@/assets/function/风车.png"> 搜索历史
          <button @click="REFRESSEARCHHHISTORY">一键清空</button>
        </div>
        
        


       <!-- 搜搜历史数据 -->
       <div id="History" class="flex">
         <button v-for="item in SearchHistoryData" :key="item.id" class="HistoryOne flex " @click="search_(item)">
           <div class="overflow label">{{item.value}}</div>
           <i class="el-icon-close flex" @click="DELETESEARCHHISTORY(item.id)"></i>
        </button>
      </div>
      


   </div>
</template>
<script>
import data from '@/common/data'
import {mapState,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
    computed:{
        ...mapState('Search',['SearchHistoryData'])
    },
    methods:{
        ...mapMutations('Search',['DELETESEARCHHISTORY','REFRESSEARCHHHISTORY','SETKEYWORD','SETNAVIINDEX','SEARCHDOWN','ADDSEARCHHISTORY']), //删除一个 删除全部
        search_(data){
             this.ADDSEARCHHISTORY(data)
             this.SETKEYWORD(data.value)
             this.SETNAVIINDEX(1)
             this.SEARCHDOWN()
             this.$router.push('/search',()=>{})
        }
    }
  }
</script>
<style scoped lang='less'>
#Title{
  width: 100%;
  justify-content: flex-start;
  font-size: 20px;
  color: black;
  position: relative;

  img{
     width:20px ;
     height: 20px;
     animation: rotate 4s linear infinite;
     margin-right: 5px;
  }
  button{
     position: absolute;
     right: 50px;
     font-size: 18px;
  }
}
#History{
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    margin-left: 10px;

    .HistoryOne{
   
      height: 30px;
      padding:0 20px;
      background: var(--GeneralBackColor);
      border-radius: 2px;
      margin: 5px;

      font-size: 16px;
      color: white;

      position: relative;
     .label{
       max-width: 100px;
     }
      i{
        font-size: 14px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        position: absolute;
        width: 20px;height: 20px;
        right: -5px;top: -5px;
        border-radius: 50%;
        display: none;
      }
   }
   .HistoryOne:hover i{
     display: flex;
     justify-content: center;
   }
}

</style>